<script lang="jsx" setup>
import { ref } from 'vue';
import { UUID } from 'uuidjs';
import { getPnlList } from '@/service/api/modules/trace/one-code-trace';

const pnlId = ref(null);

function setCurrentPnlId(value) {
  pnlId.value = value;
}

const pnlTableData = ref([]);
const pnlColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'pnlId',
    dataIndex: 'pnlId',
    title: 'PNL号',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'trackType',
    dataIndex: 'trackType',
    title: '过账动作',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      const obj = {
        TRACKIN: '上机',
        TRACKOUT: '下机'
      };
      return obj[record.trackType] || '';
    }
  },
  {
    key: 'mainEqpName',
    dataIndex: 'mainEqpName',
    title: '产线名称',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'subEqpId',
    dataIndex: 'subEqpId',
    title: '产线代码',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'subEqpName',
    dataIndex: 'subEqpName',
    title: '设备名称',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'sliceType',
    dataIndex: 'sliceType',
    title: '片型',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'dateTime',
    dataIndex: 'dateTime',
    title: '时间',
    align: 'center',
    checked: true,
    ellipsis: true
  }
];
const pnlTableLoading = ref(false);
function getData() {
  pnlTableLoading.value = true;
  getPnlList({
    pnlId: pnlId.value
  })
    .then(({ data, error }) => {
      if (!error) {
        data.forEach((item, index) => {
          item.tableUuid = UUID.generate();
          item.dataIndex = index + 1;
          return item;
        });
        pnlTableData.value = data;
      }
    })
    .finally(() => {
      pnlTableLoading.value = false;
    });
}

function reset() {
  pnlId.value = null;
  pnlTableData.value = [];
  pnlTableLoading.value = false;
}

defineExpose({
  setCurrentPnlId,
  getData,
  reset
});
</script>

<template>
  <div class="pcs-info h-full w-full">
    <Table
      :column="pnlColumn"
      :show-row-selection="false"
      :data-source="pnlTableData"
      :scroll="{ y: 'auto' }"
      :is-init-get-data="false"
      row-key="tableUuid"
      :is-pagination="false"
      class="h-full"
      :loading="pnlTableLoading"
      :show-card-header="false"
      :row-height="40"
    ></Table>
  </div>
</template>

<style lang="scss" scoped>
.pcs-info {
  padding-top: 10px;
  :deep(.ant-card) {
    .ant-card-body {
      padding-bottom: 0;
      .surely-table-wrapper {
        .ant-spin-nested-loading {
          .surely-table-column-title {
            color: #646cff;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
